<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'

import { useRouter, useRoute } from 'vue-router';
import { getInstitutionDetail } from '@/api/institution';
import { getProductList } from '@/api/product';
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useImage } from '@/utils/Img';
import { useDict } from '@/hooks/dict';
import { usePaging } from '@/hooks/pagination';
import type { Product as ProductType } from '@/types/product';
const { queryParams, total, loadData, setQueryParms } = usePaging()
setQueryParms({
  mainGuaranteeWay: "",
  loanTerm: "",
  loanLimit: "",
  orgCode: ""
})
const { loan_limit: loanLimit, loan_term: loanTerm, productMainGuaranteeType: guaranteeType } = useDict("loan_term", "loan_limit", "productMainGuaranteeType")

const { baseImg } = useImage();
import type { Institution } from '@/types/institution';
const router = useRouter();
const route = useRoute();
const institution = reactive<Institution>({})
const productList = ref<ProductType[]>([])
function handleDetail(id: string) {
  router.push({ path: `/financial-products/${id}` });
}
onMounted(() => {
  getDetail()
})
function getDetail() {
  getInstitutionDetail(route.params.id).then(res => {
    Object.assign(institution, res.data)
    queryParams.orgCode = institution.orgCode
    getProductData()
  })
}
function getProductData() {
  loadData(getProductList).then(res => {
    productList.value = res.rows
  })
}

</script>
<template>
  <div>
    <div class="w-1200 m-auto">
      <div class="pt-7 pb-5 mt-3">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/financial-institution' }">金融机构</el-breadcrumb-item>
          <el-breadcrumb-item>{{ institution.orgName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="details-box w-full">
        <div class="w-62.5 h-12.5">
          <!-- <img class="w-auto h-auto max-w-full max-h-full" :src="institution.logo" /> -->
          <el-image class="inline-block w-30 max-h-15" :src="baseImg(institution.logo)">
            <template #error>
              <div class="image-slot col9">
                <icon-picture class="w-30 max-h-15" />
              </div>
            </template>
          </el-image>
        </div>
        <div class="pt-7">
          <div class="">
            <span class="text-5">{{ institution.orgName }}</span>
            <span class="text-3.75 ml-4">发布时间：{{ institution.createTime }}</span>
          </div>
          <p class="mt-2.5 leading-6.25">
            {{ institution.introduction }}
          </p>
          <div class="right-box-bottom flex">
            <div class="bottom-left"><span class="num">{{ institution.productTotal || 0 }}个</span> <span
                class="porduct">发布产品</span></div>
            <div class="bottom-left"><span class="num">{{ institution.dockingTotal || 0 }}个</span> <span
                class="porduct">成功对接</span></div>
          </div>
        </div>
      </div>

      <ul class="market-header-ul mt-5.2">

        <li class="py-2.5  flex items-center">
          <span class="text-3.5 col3 whitespace-nowrap">担保方式：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.mainGuaranteeWay" @change="getProductData" size="small">
                <el-radio-button v-for="(item, i) in guaranteeType" :key="i" :label="item.label" :value="item.value" />
              </el-radio-group>
            </div>
          </div>
        </li>

        <li class="py-2.5  flex items-center">
          <span class="text-3.5 col3 whitespace-nowrap">贷款期限：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.loanTerm" @change="getProductData" size="small">
                <el-radio-button label="不限" value="" />
                <el-radio-button v-for="(item, i) in loanTerm" :key="i" :label="item.label" :value="item.value" />
              </el-radio-group>
            </div>
          </div>
        </li>
        <li class="py-2.5  flex items-center">
          <span class="text-3.5 col3 whitespace-nowrap">贷款额度：</span>
          <div class="inline-block">
            <div class="pos-rela">
              <el-radio-group v-model="queryParams.loanLimit" @change="getProductData" size="small">
                <el-radio-button label="不限" value="" />
                <el-radio-button v-for="(item, i) in loanLimit" :key="i" :label="item.label" :value="item.value" />
              </el-radio-group>
            </div>
          </div>
        </li>
      </ul>
      <p class="col9 text-3.25 mt-10">
        搜索到<span class="color-red">{{total}}</span>个结果
      </p>


      <div class="mt-5">
        <!-- <ul class="flex text-4 items-center mt-5 gap-5">
          <li class="fl cursor-pointer">
            综合排序
          </li>
          <li class="fl cursor-pointer">
            按热度
          </li>
          <li class="fl cursor-pointer">
            按利率
          </li>
        </ul> -->

        <div class="market-content-content flex flex-wrap gap-10">
          <product v-for="(item, i) in productList" :key="i" :item="item" @click="handleDetail(item.id)"></product>
        </div>
        <div class="mt-15 pb-20 flex justify-center">
          <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.pageNum"
            @change="getProductData" v-model:page-size="queryParams.pageSize" :total="total" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-radio-button__inner) {
  border: 0 !important;
  background-color: transparent;
  border-radius: 3px !important;
  border-left: 0;
  color: #333;
}

.details-box {
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 8px 0 rgba(57, 120, 203, .1);
  padding: 29px;

  .bottom-left {
    width: 78px;
    height: 78px;
    border-radius: 6px;
    border: 1px solid #e0e9ff;
    text-align: center;
    margin: 13px 34px 0 0;
    cursor: default;

    .num {
      font-size: 22px;
      color: #f36f13;
      display: block;
      padding: 8px 0;

    }

    .porduct {
      font-size: 15px;
      color: #666;
    }
  }
}
</style>
